<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!-- <meta http-equiv="Cache-Control" content="public" /> -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>汽车在线</title>
    <link type="text/css" rel="stylesheet" href="css/global.css" />
    <style>
        .header .info-bar {
            position: absolute;
        }

        #map-container {
            width: 100%;
            height: 100%;
            margin-top: 3.5em;
        }

        .info-window-container {
            width: 14em;
            -webkit-background-color: rgba(0, 0, 0, .5);
            background-color: rgba(0, 0, 0, .5);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            position: relative;
            color: #fff;
            padding: 10px;
        }

        .info-window-container a,
        .info-window-container a:visited {
            color: #fff;
            text-decoration: underline;
        }

        .info-window-container .arrow {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid rgba(0, 0, 0, .5);
            width: 0;
            height: 0;
            position: absolute;
            left: 50%;
            margin-left: -5px;
            bottom: -7px;
        }

        .info-window-container .content .name {
            font-size: 1.4em;
            margin-bottom: 5px;
        }

        .info-window-container .content li {
            padding: 2px 0;
        }

        .info-window-container .toolbar {
            text-align: center;
            margin-top: 10px;
        }

        .info-window-container .toolbar a {
            margin-left: 20px;
        }

        #device-changer {
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -68px;
        }

        #device-changer .prev {
            background-image: url(images/prev.png);
            -webkit-background-size: contain;
            background-size: contain;
            width: 68px;
            height: 43px;
            display: inline-block;
            cursor: pointer;
        }

        #device-changer .next {
            background-image: url(images/next.png);
            -webkit-background-size: contain;
            background-size: contain;
            width: 68px;
            height: 43px;
            display: inline-block;
            cursor: pointer;
        }

        #device-changer .prev:hover,
        #device-changer .prev:active {
            background-image: url(images/prev2.png);
        }

        #device-changer .next:hover,
        #device-changer .next:active {
            background-image: url(images/next2.png);
        }

        .info-window-google {
            font-size: 16px;
            font-family: '微软雅黑', tahoma, arial, '宋体';
            font-weight: normal;
        }
    </style>
    <script src="js/lang_cn.js"></script>
    <script src="js/brand/zepto.min.js"></script>
    <script src="js/global.js"></script>
</head>

<body>
    <div class="container">
        <div class="header">
            <h3 class="title">
                <a class="back" href="javascript:history.back();"></a>
                <a class="toolbox" href="javascript:;"></a>车辆监控<span class="refresh-btn"></span>
            </h3>
            <div class="info-bar">
                <span class="right countdown clear" href="javascript:;"><span class="seconds">10</span>秒后刷新<i
                        class="time-selector"></i></span>
                <span class="left name"></span>
                <span class="middle time"></span>
            </div>
        </div>
        <div id="map-container">
            <div class="loading">Loading...</div>
        </div>
        <div id="device-changer">
            <a class="prev" data-action="prev"></a>
            <a class="next" data-action="next"></a>
        </div>
    </div>
    <script>
        var utils = goome.wx.utils;
        if (utils.defaultParams().map_type == 'GOOGLE') {
            utils.writeScripts(['http://ditu.google.cn/maps/api/js?sensor=false', 'js/overlay-google.js', 'js/monitor-google.js']);
        } else {
            utils.writeScripts(['http://api.map.baidu.com/api?v=2.0&ak=BCa2d508d2c567acd009eb09765f5797', 'js/brand/InfoBox_min.js', 'js/monitor.js']);
        }
    </script>
    <script>
        monitorPage.init();
        utils.mapTypeOptions('monitor');
    </script>
</body>

</html>